<template>
  <div class="customer-buss-form-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card class='type-info-box-card'>
        <el-form ref='form' :model='form' size='mini' label-position='top'>
          <el-row :gutter="10">
            <el-col :md="6" :lg="4">
              <el-form-item label='柜员号' class='typeInfo-el-form-item' prop='TELLERNO'>
              <el-input  v-model="form.TELLERNO" placeholder="请输入柜员号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='柜员姓名' class='typeInfo-el-form-item' prop='TELLERNAME'>
              <el-input  v-model="form.TELLERNAME" placeholder="请输入柜员号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
            <el-form-item label="柜员所属机构" prop="BRANCHNO">
              <select-tree
                :single-check="true"
                v-model="form.BRANCHNO"
                style="width:170px;"
                :props='{id:"orgno",label: "cname",children: "children"}'
                :tree-data="brnoList"
                placeholder="请选择机构"
              ></select-tree>
            </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item prop="TELLERROLE" label="柜员角色">
                  <el-select v-model="form.TELLERROLE" filterable placeholder="请选择柜员角色">
                    <el-option 
                      v-for="item in TELLERROLELIST"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item prop="STATUS" label="柜员状态">
                  <el-select v-model="form.STATUS" filterable placeholder="请选择柜员状态">
                    <el-option 
                      v-for="item in STATUSLIST"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='登录IP' class='typeInfo-el-form-item' prop='LOGINIP'>
              <el-input  v-model="form.LOGINIP" placeholder="请输入登录机器IP地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="query">查询</el-button>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class='type-info-bottom'>
        <el-row :gutter="10">
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_Outbound_Add')">
          <el-button type="primary" size="mini" @click="addTable" icon="el-icon-plus">新增</el-button>
        </el-col>
         <el-col :lg='2' :md='3' v-if="btnPermission('Button_Outbound_Edit')">
            <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='DialogShow'>修改</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_Outbound_Delete')">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="delTeller" :disabled="currentRow.length!=1">删除</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger"
            size="mini" icon='el-icon-close' :disabled="currentRow.length!=1" @click="signBack"
          >签退</el-button>
        </el-col>
        </el-row>
        <!-- 若要使用动态表头 建议在data中单列出table的header内容 在data中监听不到 -->
        <el-table 
          border
          ref="tableData" 
          :data='tableData' 
          header-row-class-name="tableHeaderClass"    
          @selection-change="handleCurrentChange" 
          class="tableMarginTop">
          <!-- 这里的prop按照返回的字段去更新 -->
          <el-table-column type="selection" width="40px"></el-table-column>
          <el-table-column prop='TELLERNO'   label='柜员号'></el-table-column>
          <el-table-column prop='TELLERNAME'  label='柜员姓名'></el-table-column>
          <el-table-column prop='BRANCHNO' label='柜员所属机构号'></el-table-column>
          <el-table-column prop='BRANCHNAME' label='柜员所属机构名称'></el-table-column>
          <el-table-column prop='TELLERROLE' label='柜员角色' :formatter="dataFormat"></el-table-column>
          <el-table-column prop='TEL' label='联系方式'></el-table-column>
          <el-table-column prop='EMAIL' label='邮箱'></el-table-column>
          <el-table-column prop='STATUS' label='柜员状态' :formatter="dataFormat"></el-table-column>
          <el-table-column prop='LOGINIP' label='登录机器IP地址'></el-table-column>
          <el-table-column prop='LOGINMAC' label='登录机器MAC地址'></el-table-column>
          <el-table-column prop='LOGINOID' label='柜员客户端标志号'></el-table-column>
          <el-table-column prop='LOGINFLAG' label='登录方式' :formatter="dataFormat"></el-table-column>
          <el-table-column prop='UPDTIME' label='状态更新时间'></el-table-column>
        </el-table>
        <div class="box" >
          <el-pagination background  @current-change="changePage"  :current-page="currentPage"
           :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </div>
      </el-card>
       <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addTellerInfo" :option="dialogOptions" @refreshTable="query"></component>
    </keep-alive>
    </div>
  </div>
</template>

<script>
import signBack from '@/message/tellerManagement/tellerInfoMaintenance/signBack';
import query from '@/message/tellerManagement/tellerInfoMaintenance/query';
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import addTellerInfo from "./dialog/addTellerInfo";
//通讯相关
import request from "@/common/utils/request";
import request1 from "@/common/utils/requestTest";
import branchList from "@/message/shared/branch-list"; //机构号
import selectTree from "@/components/selectTree3/";
import add from '@/message/tellerManagement/tellerInfoMaintenance/add';

export default {
  components: { selectTree },
  data() {
    return {
      enum: { "01": "大堂经理", "02": "理财经理"},
      enum1: { "0": "未登录", "1": "已登录"},
      enum2: { "0": "指纹", "1": "密码"},
      loading: false,
      TELLERROLELIST: [
        { name: "01-大堂经理", value: "01" },
        { name: "02-理财经理", value: "02" }
      ],
      STATUSLIST: [
        { name: "0-未登录", value: "0" },
        { name: "1-已登录", value: "1" },
      ],
      currentRow: [],
      tableData: [],
      brnoList: [], //机构下拉列表
      currentPage: 1,
      tableTotal: undefined,
      pageSize: getGlobalParams.get("PageSize"),
      form: {
        TELLERNO:"",
        LOGINFLAG:"",
        LOGINIP:"",
        TELLERNAME:"",
        BRANCHNO:[],
        TELLERROLE:"",
        STATUS:"",
      },
      dialogList: {
        //指定被渲染组件列表
        addTellerInfo,
       
      },
      dialogOptions: {
        //新增
        isShow: false
      },
    };
  },
  created: function(){
    this.initList();
    this.query();

  },
  methods: {
      addTable() {
      //添加
      this.dialogOptions.isShow = true;
      this.dialogOptions.isChecked = false;
      this.dialogOptions.title = "柜员信息新增";
      this.dialogOptions.log = "1"; //添加
      this.dialogOptions.TELLERROLELIST = this.TELLERROLELIST;
    },
    DialogShow() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.title = "柜员信息修改";
        this.dialogOptions.log = "2"; //修改
        this.dialogOptions.TELLERROLELIST = this.TELLERROLELIST;
    },
    initList() {
      //机构下拉框初始化
      let resBody = new branchList();
      resBody.data.orgno = this.$store.getters.BranchNum;
      request(resBody)
        .then(response => {
          this.brnoList = response.RspInfo.Result || [];
          this.brnoMap = response.RspInfo.orgMap || {};
          this.brnoList = toolBox.formatTreeData(
            this.brnoList,
            "orgno",
            "superno"
          );
        })
        .catch(error => {
          console.error("查询错误", error);
        });
    },
    query(val,isPage){
      if(!isPage){
        this.currentPage = 1
      }
      this.loading = true;
      let resBody = new query();
      resBody.data.TELLERNO = this.form.TELLERNO;
      resBody.data.LOGINFLAG = this.form.LOGINFLAG;
      resBody.data.LOGINIP = this.form.LOGINIP;
      resBody.data.TELLERNAME = this.form.TELLERNAME;
      resBody.data.BRANCHNO = this.form.BRANCHNO[0];
      resBody.data.TELLERROLE = this.form.TELLERROLE;
      resBody.data.STATUS = this.form.STATUS;
      resBody.data.pageflag = 4;
      resBody.data.currpage = this.currentPage;
      resBody.data.pagerownum = this.pageSize;
      request1(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000"){
          this.tableData = response.RSP_BODY.TELLERINFO;
          this.tableTotal = response.RSP_BODY.totalnum;
        } else {
          this.$message({
            type: "error",
            message: response.SYS_HEAD.ReturnMessage
          });
          this.tableData = [];
        }
        this.loading = false;
      })
      .catch(error => {
        this.loading = false;
      })
    },
    delTeller(){
      this.$confirm("该柜员信息将被删除，是否继续", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        this.delTel();
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消！"
        });
      });
    },
    delTel(){
      this.loading = true;
      let resBody = new add();
      resBody.data.OPRFLAG = "2";
      resBody.data.TELLERNO = this.currentRow[0].TELLERNO;
      request1(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000"){
          this.loading = false;
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.query();
        } else {
          this.loading = false;
          this.$message({
            type: "error",
            message: "删除失败！"
          });
        }
      })
      .catch(error => {
        this.loading = false;
      });
    },
    signBack(){
      this.$confirm("将签退该柜员，是否继续", "签退", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        this.signBack1();
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消！"
        });
      });
    },
    signBack1(){
      this.loading = true;
      let resBody = new signBack();
      resBody.data.OPRFLAG = "3";
      resBody.data.TELLERNO = this.currentRow[0].TELLERNO;
      request1(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000"){
          this.loading = false;
          this.$message({
            type: "success",
            message: "签退成功！"
          });
          this.query();
        } else {
          this.loading = false;
          this.$message({
            type: "error",
            message: "签退失败！"
          });
        }
      })
      .catch(error => {
        this.loading = false;
      });
    },
    clearForm(item){
      this.$refs["" + item].resetFields();
    },
    changePage(val){
      this.currentPage = val;
      this.query(val,true);
    },
    handleCurrentChange(val) {
     //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
       this.currentRow = val;
     },
      dataFormat(row, column) {
      //格式化表格
      if (column.property == "TELLERROLE"){
         return this.enum[row[column.property]];
      }
      if (column.property == "STATUS"){
         return this.enum1[row[column.property]];
      }
      if (column.property == "LOGINFLAG"){
         return this.enum2[row[column.property]];
      }
      }
  }
};
</script>


<style lang="scss">
.type-info-bottom {
  margin-top: 10px;
}
.box {
  margin-top: 20px;
  text-align: right;
}
.el-date-editor.el-input {
  width: 100% !important;
}
.el-card {
  overflow: inherit;
}
</style>
